<script>
import FooterCom from './components/FooterCom.vue';

export default{
  components:{
    FooterCom
  }
}
</script>

<template>
  <RouterView></RouterView>
  <RouterView name="footer"></RouterView>

<div class="landscape-tip">
    请切换到移动端观看
  </div>
</template>

<style lang="less" scoped>

.landscape-tip {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: none;
  justify-content: center;
  align-items: center;
}

// 查询到你是横屏状态显示这个 盒子
@media only screen and (orientation: landscape) {
  // 横屏状态下使用flex布局，其他情况不显示
  .landscape-tip {
    display: flex;
  }
}
</style>
